<template>
  <div class="kw-drop-down" ref="main">
    <li @click="toggleMenu()" :class="`kw-button kw-button-${type||'normal'} dropdown-toggle`">
        {{ labelChange?selectedOption.name: label }}
        <span class="caret"></span>
    </li>

    <ul class="dropdown-menu" :class="{ 'hide' : !showMenu}">
        <li v-for="(option, index) in options" :key="index">
            <a href="javascript:void(0)" @click="updateOption(option)">
                {{ option.name }}
            </a>
        </li>
    </ul>
  </div>
</template>

<script>
export default {
    name: 'kw-drop-down',
    props: {
        options: {
            type: [Array, Object],
            default() {
                return []
            }
        },
        labelChange: {
            default: true
        },
        label: {
            default: '请选择'
        },
        selected: {},
        type: String
    },
    data:function() {
        return {
            selectedOption: {
                name: '',
            },
            showMenu: false,
        }
    },
    mounted: function() {
        this.selectedOption = this.selected || {
            name: '请选择'
        };
        document.addEventListener('click', this.hidePanel, false)
    },
    methods: {
         updateOption:function(option) {
            this.selectedOption = option;
            this.showMenu = false;
            this.$emit('on-item-click', this.selectedOption);
        },
        toggleMenu:function() {
            this.showMenu = !this.showMenu;
        },
        closeBtnGroup:function () {
            this.showMenu = false;
        },
        hidePanel:function(e) {
            if (!this.$refs.main.contains(e.target)) {//点击除弹出层外的空白区域
                this.showMenu = false;
            }
        }
    }
}
</script>

<style lang="less">
.kw-drop-down {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    a {
        &:hover {
            text-decoration: none;
         }
    }
    .dropdown-toggle {
        list-style-type: none;
        text-transform: none;
        padding-right: 1rem;
        padding-left: 1rem;
        .caret {
            display: relative;
            width: 0;
            position: relative;
            top: 6px;
            height: 0;
            margin-left: 5px;
            vertical-align: middle;
            border-top: 4px dashed;
            border-top: 4px solid \9;
            border-right: 4px solid transparent;
            border-left: 4px solid transparent;
            float: right;
        }
    }
    .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1000;
        padding: 5px 0;
        margin: 2px 0 0;
        list-style: none;
        font-size: 14px;
        text-align: left;
        background-color: #fff;
        border: 1px solid #ccc;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
        &.hide {
            display: none;
        }
        > li {
            overflow: hidden;
            width: 100%;
            position: relative;
            margin: 0;
            > a {
                padding: 10px 30px;
                display: block;
                clear: both;
                font-weight: normal;
                line-height: 1.6;
                color: #333333;
                white-space: nowrap;
                text-decoration: none;
                &:hover {
                    background: #efefef;
                    color: #409FCB;
                }
            }
        }
    }
}
</style>